<template>
  <div class="login-container" v-if="paperinfo">
    <el-row>
      <el-col :span="12" :offset="6" >

        <h1>{{paperinfo.classroom.name}}班 ::{{paperinfo.name}}<span v-if="paperinfo.type == 1">练习</span> <span v-if="paperinfo.type == 2">考试</span> </h1>
        <div v-for="(item,index) in paperinfo.questionList" :key="item.message" class="quesitem">
          {{index+1}}：（
          <span v-if="item.type==1">选择题</span>
          <span v-if="item.type==2">判断题</span>
          <span v-if="item.type==3">多选题</span>
          <span v-if="item.type==4">简答题</span>

          ）{{item.question}} ({{item.score}}分)
          <div v-if="item.type==1">
            <el-card class="box-card">
              <el-radio-group v-model="item.realanswer">

                <el-row class="radioitem" >
                  <el-radio label="A" >
                    {{item.answer1}}
                  </el-radio>
                </el-row>
                <el-row class="radioitem" >
                  <el-radio label="B" >
                    {{item.answer2}}
                  </el-radio>
                </el-row>
                <el-row class="radioitem" >
                  <el-radio label="C" >
                    {{item.answer3}}
                  </el-radio>
                </el-row>

                <el-row class="radioitem" >
                  <el-radio label="D" >
                    {{item.answer4}}
                  </el-radio>
                </el-row>
              </el-radio-group>
            </el-card>
          </div>
          <div v-if="item.type==2">
            <el-card class="box-card">
              <el-radio-group v-model="item.realanswer">
                <el-row class="radioitem" >
                  <el-radio label="A" >
                    {{item.answer1}}
                  </el-radio>
                </el-row>
                <el-row class="radioitem" >
                  <el-radio label="B" >
                    {{item.answer2}}
                  </el-radio>
                </el-row>
              </el-radio-group>
            </el-card>
          </div>
          <div v-if="item.type==3">
            <el-card class="box-card">

              <el-checkbox-group v-model="item.realanswer">

                <el-row class="radioitem" >
                  <el-checkbox value="A" label="A" >
                    {{item.answer1}}
                  </el-checkbox>
                </el-row>
                <el-row class="radioitem" >
                  <el-checkbox  label="B"  value="B" >
                    {{item.answer2}}
                  </el-checkbox>
                </el-row>
                <el-row class="radioitem" >
                  <el-checkbox label="C"  value="C" >
                    {{item.answer3}}
                  </el-checkbox>
                </el-row>

                <el-row class="radioitem" >
                  <el-checkbox label="D" value="D" >
                    {{item.answer4}}
                  </el-checkbox>
                </el-row>
              </el-checkbox-group>
            </el-card>
          </div>
          <div v-if="item.type==4">
            <el-card>
              <el-input type="textarea" size="mini" >

              </el-input>
            </el-card>

          </div>
        </div>
      </el-col>
      <el-col :span="4" :offset="1">
        <div class="sureblock" >

          <el-button @click="dosubmit" style="margin-top: 50px" size="mini" type="success">提交</el-button>
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { login, logout,getMyInfo,getPaperDetail,answerQuestion,finishAnswer } from "@/api/student";
import { getToken, setToken, removeToken } from "@/utils/auth";

export default {
  name: "login",
  data() {
    const validatename = (rule, value, callback) => {
      callback();
    };
    const validatePass = (rule, value, callback) => {
      if (value.length < 2) {
        callback(new Error("密码不能小于2位"));
      } else {
        callback();
      }
    };
    return {
      loginForm: {
        name: "123",
        password: "123",
      },
      paperinfo:undefined,
      loginRules: {
        name: [{ required: true, trigger: "blur", validator: validatename }],
        password: [
          { required: true, trigger: "blur", validator: validatePass },
        ],
      },
      loading: false,
      pwdType: "password",
    };
  },
  created() {
    this.getPaper();

  },
  methods: {
    dosubmit(){
      this.paperinfo.questionList.forEach((ele,index)=>{
        console.log(ele.realanswer)
        var answ = {
          pid:this.$route.query.id,
          qid:ele.id,
          answer:ele.realanswer,
        }
        if(ele.type==3)
          answ.answer =  JSON.stringify(ele.realanswer)
        answerQuestion(answ).then(res=>{
          console.log(res)
        })
        if(index == this.paperinfo.questionList.length -1 ) {
          finishAnswer({pid:this.$route.query.id}).then(res=>{
            this.$message.success("您的分数为：" + res.info.score +"分")
            console.log(res)
          })
        }
      })
    },
    getPaper(){
      getPaperDetail({id:this.$route.query.id}).then(res=>{
        console.log(res)
        this.paperinfo = res.info
        this.paperinfo.questionList.forEach(ele=>{
          if(ele.type == 3){
            ele.realanswer = []
          }
        })
      })
    },

  },
};
</script>

<style rel="stylesheet/scss" lang="scss">
$bg: #ffffff;
$dark_gray: #ffffff;
$light_gray: rgb(250, 250, 250);

  .login-container{
    padding-bottom: 50px;
  }
  .radioitem{
    margin-top: 10px;
  }
  .quesitem{
    margin-top: 20px;
  }
  .sureblock{
    margin-top: 100px ;
    background-color: #dce3d9;
    text-align: center;
    position: fixed;
    top: 200px;
    width: 200px;
    border-radius: 5px;
    height: 100px;
  }
</style>
